<include file="public@header"/>

</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li class="active"><a href="{:url('QuitClass/index')}">退班分析</a></li>
    </ul>
    <form class="well form-inline margin-top-20 row" method="post" action="{:url('QuitClass/index')}">
        <label for="开始时间" class="col-md-6 col-xs-12 form-group">
            开始时间:
            <input class="form-control" type="text" name="homework_starttime" style="" value="{:input('request.homework_starttime')}"
                   placeholder="年/月/日">
            -
            <input class="form-control" type="text" name="homework_endtime" style="" value="{:input('request.homework_endtime')}"
                   placeholder="年/月/日">
        </label>
        <label class="col-md-3 col-sm-6  form-group" style="margin-bottom:15px">
            所属校区:
            <select class="form-control" name="school_id" id="school_id">
                <option value='0'>全部</option>
                <notempty name="school_data">
                    <volist name="school_data" id="vo">
                        <if condition="isset($param.school_id) && $param.school_id == $vo.id">
                            <option value="{$vo.id}" selected>{$vo.name}</option>
                            <else/>
                            <option value="{$vo.id}">{$vo.name}</option>
                        </if>
                    </volist>
                </notempty>
            </select>
        </label>
        <label class="col-md-3 col-sm-6  form-group" style="margin-bottom:15px">
            课程：
            <select class="form-control" name="course_id" id="course_id">
                <option value="0">全部</option>
                <notempty name="course_data">
                    <volist name="course_data" id="vo">
                        <if condition="isset($param.course_id) && $param.course_id == $vo.id">
                            <option value="{$vo.id}" selected>{$vo.course_name}</option>
                            <else/>
                            <option value="{$vo.id}">{$vo.course_name}</option>
                        </if>
                    </volist>
                </notempty>
            </select>
        </label>
        <label class="col-md-3 col-sm-6  form-group" >
            班级：
            <select class="form-control" name="class_id" id="class_id">
                <option value="0">全部</option>
                <volist name="data_class" id="vo">
                    <if condition="isset($param.class_id) &&   $param.class_id eq $vo.cid">
                        <option value="{$vo.cid}" selected>{$vo.cname}</option>
                        <else/>
                        <option value="{$vo.cid}">{$vo.cname}</option>
                    </if>
                </volist>
            </select>
        </label>

        <label class="col-md-3 col-sm-6   form-group">
            <input type="submit"  class="btn btn-primary" value="搜索"/>
            <a class="btn btn-danger" href="{:url('QuitClass/index')}">清空</a>
        </label>
    </form>
</div>
<!--生成表的地方-->
<div id="main" style="width: 600px;height:400px;" class="center-block"></div>
<!--table-->
<div id="table"  class="row col-lg-8 center-block ">
    <table class="table table-bordered h4 ">
        <tr>
            <td class='col-md-3 right-align'>
                退班人数：
            </td>
            <td>
                {$data_tui}
            </td>
        </tr>
        <tr>
            <td>
                总人数：
            </td>
            <td>
                {$data_all}
            </td>
        </tr>
        <tr>
            <td>
                退班率：
            </td>
            <td>
                {$tui}
            </td>
        </tr>

    </table>

</div>


<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<script type="text/javascript" src="__STATIC__/js/echarts.js"></script>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<script type="text/javascript">


    $(document).ready(function () {
        //搜索栏根据学校选择班级
        $('#school_id').on('change',function () {
            var sid = $(this).val();
            if(sid == 0){
                $('#class_id').empty();
                $('#class_id').html();
                var html = '<option value=\"0\">全部</option>';
                $('#class_id').html(html);
                return false;
            }
            $course_id=$("#course_id option:selected").val();
            $.ajax({
                url:"{:url('classes/Classes/ajax1_class')}",
                type:'post',
                dataType:'json',
                data:{"school_id":sid,'course_id':$course_id},
                success:function(jsonData){
                    $('#class_id').empty();
                    var html = '<option value=\"0\">全部</option>';

                    if(jsonData.code == 1){
                        for(var i in jsonData.data){
                            html += '<option value=\"'+jsonData.data[i].id+'\">'+jsonData.data[i].name+'</option>';
                        }
                    }
                    $('#class_id').html(html);


                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    console.log('xhr='+XMLHttpRequest.readyState+' status='+textStatus+' error='+errorThrown);
                }
            });
        });

        $('#course_id').on('change',function () {
            var $course_id = $(this).val();
            if($course_id == 0){
                $('#class_id').empty();
                var html = '<option value=\"0\">全部</option>';
                $('#class_id').html(html);
                return false;
            }
            sid=$("#school_id option:selected").val();


            $.ajax({
                url:"{:url('classes/Classes/ajax1_class')}",
                type:'post',
                dataType:'json',
                data:{"school_id":sid,'course_id':$course_id},
                success:function(jsonData){
                    $('#class_id').empty();
                    var html = '<option value=\"0\">全部</option>';
                    if(jsonData.code == 1){
                        for(var i in jsonData.data){
                            html += '<option value=\"'+jsonData.data[i].id+'\">'+jsonData.data[i].name+'</option>';
                        }
                    }
                    $('#class_id').html(html);
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    console.log('xhr='+XMLHttpRequest.readyState+' status='+textStatus+' error='+errorThrown);
                }
            });
        });
    });




    /***************** 统计分析表 ********************/
    //    var data=<?php echo $data_tui;?>

    var data="{$data_tui}";
    data = JSON.parse(data);//转换为json对象

    var data_all="{$data_all}";
    data_all = JSON.parse(data_all);//转换为json对象
    if(data_all==0 || data==0 )
    {
        data_all=100;
    }
    console.log(data_all);

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    option = {
        title : {
            text: '学生退班统计',
//            subtext: '详情',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['退班人数','没有退班人数']
//            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']

        },
        series : [
            {
                name: '',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:data, name:'退班人数('+data+')'},
                    {value:data_all-data, name:'没有退班人数('+parseInt(data_all-data)+')'},
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    $('[name="homework_starttime"]').datepicker();
    $('[name="homework_endtime"]').datepicker();
    $('#homework_starttime').datepicker();
    $('#homework_endtime').datepicker();


</script>
</body>
</html>